<template>
  <div class="verification-code" align="left">
    <div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
    </div>
    <div class="verification-code-content">
      <h1>请输入验证码</h1>
      <p>验证码以发送至<span>15533911111</span></p>
    </div>
    <div class="verification-code-cont">
      <van-password-input :value="value" :mask="false" :focused="showKeyboard" @focus="showKeyboard = true"/>
      <!-- 数字键盘 -->
      <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false"/>
      <div>
        <van-count-down :time="time" format="ss" style="display: inline-block"/>
        <p style="display: inline-block">秒后重新发送验证码</p>
      </div>
    </div>
  </div>
</template>

<script>

  import local from '@/utils/localStorage.js';
  import {Toast} from "vant";

  export default {
    name: "verification_code",
    data(){
      return{
        value: "",
        loginCode: "",
        showKeyboard: true,
        time: 60*1000,
        form: {
          loginName: null,
        }
      }
    },
    created() {
      var phone = parseInt(this.$route.query.phone);
      this.form.loginName = phone;
      var code = this.$route.query.code;
      this.loginCode = code;
      console.log("code",code);
    },
    methods: {
      toBack(){
        this.$router.go(-1);//返回上一层
      }
    },
    watch: {
      value(newName,oldName) {
        if(newName.length == 6 && newName== this.loginCode){
          this.$router.push({path:"/reset_password",query:{phone:this.form.loginName}});
        }else if(newName.length == 6 && newName != this.loginCode){
          Toast({
            message: "验证码输入错误",
            position: "top"
          });
        }
      },
    },
  }
</script>

<style scoped>
  .verification-code{
    padding: 1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .verification-code-content{
    margin-top: 30%;
  }
  .verification-code-content h1{
    font-size: 1.4rem;
    letter-spacing:1px;
    color: black;
  }
  .verification-code-content p{
    padding: 0.5rem 0;
    font-size: 0.5rem;
    color: #999999;
    letter-spacing:1px
  }
  .verification-code-content span{
    color: black;
    font-size: 0.8rem;
  }
  .verification-code-cont{
    padding-top: 0.5rem
  }
  .verification-code-cont p{
    padding: 0.5rem 0;
    font-size: 0.5rem;
    letter-spacing:1px
  }
  .verification-code-cont span{
    color: dodgerblue;
    font-size: 0.8rem;
  }
</style>
